<template>
  <div class="otherHome">
    <Other-Header bgColor="#5741d9"></Other-Header>
    <div class="otherHomeSection">
      <div class="otherHomeInner">
        <div class="homeHeader">
          <div class="readAll" @click="readAllMessage" v-show="count>0">{{$t('l.message_1')}}</div>
          <h3 class="homeTitle">
            {{$t('l.message_0')}}
            <span class="circle" v-show="count>0">{{count}}</span>
          </h3>
        </div>
        <div class="detailCon">
          <el-collapse v-model="activeNames" @change="handleChange" accordion>
            <el-collapse-item
              v-for="(item,index) in records"
              :key="index"
              :name="index"
              :class="{unread: item.status == 1}"
            >
              <template slot="title">
                {{item.title}}
                <i class="header-time">{{item.createTime}}</i>
              </template>
              <p v-html="item.content"></p>
            </el-collapse-item>
          </el-collapse>
          <div class="nodata"  v-show="records.length==0">
              <img src="../../assets/images/nodata.png">
              <p>{{$t('l.personal_140')}}</p>
          </div>
          <div class="transPages">
            <el-pagination
              v-show="paginationVisible"
              background
              layout="prev, pager, next"
              :page-count="pageCount"
              @current-change="onCurrentChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
export default {
  inject: ["reload"],
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      records: [],
      count: "",
      activeNames: [],
      pageCount: 0, // 总页数
      paginationVisible: false,
      pageNum: 1
    };
  },
  created() {
    this.getUserMessageList();
    this.getUserUnreadCount();
  },
  methods: {
    handleChange(index) {
      if (!Number.isInteger(index)) return;
      let { id, status } = this.records[index];

      if (status == 1) {
        this.updateRead(id, () => {
          this.records[index].status = 2;
          this.count = this.count - 1;
        });
      }
    },
    onCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getUserMessageList();
    },
    async getUserMessageList() {
      let res = await api.getUserMessageList({
        page: 1,
        pageNum: this.pageNum,
        pageSize: 15
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.records = Object.assign([], data.records);
        this.pageCount = data.pages;
        this.paginationVisible = this.pageCount > 1;
      }
    },
    async getUserUnreadCount() {
      let res = await api.getUnreadCount();
      let { code, data, msg } = res.data;
      if (code == 0) {
        this.count = data.count;
      }
    },
    async updateRead(id, callback) {
      let res = await api.updateRead({
        id: id
      });
      let { code, data, msg } = res.data;

      if (code == 0) {
        callback();
      }
    },
    async readAllMessage() {
      let res = await api.updateReadAll();
      let { code, data, msg } = res.data;

      if (code == 0) {
        this.reload();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.otherHome {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
}
.otherHomeSection {
  width: 1200px;
  box-sizing: border-box;
  margin: 20px auto 0;
  padding-bottom: 160px;
  /* 内容 */
  .otherHomeInner {
    background: #fff;
    padding: 36px 60px 0;
    min-height: 790px;
    box-sizing: border-box;
  }
  .homeHeader {
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f2fd;
    .homeTitle {
      position: relative;
      display: inline-block;
      font-size: 24px;
      font-familyA: PingFangSC-Semibold;
      font-weight: 600;
      color: #33385e;
      line-height: 33px;
      vertical-align: top;
      &::before {
        position: absolute;
        content: "";
        height: 16px;
        left: -20px;
        margin-top: 7px;
        border-left: 3px solid #2D8DFE;
        border-radius: 2px;
      }
    }
    .circle {
      display: inline-block;
      vertical-align: top;
      width: 20px;
      height: 20px;
      background: rgba(239, 87, 86, 1);
      border: 1px solid #fff;
      border-radius: 100%;
      color: #ffffff;
      line-height: 20px;
      text-align: center;
      margin-top: 3px;
    }
    .readAll {
      float: right;
      height: 30px;
      line-height: 30px;
      border-radius: 4px;
      border: 1px solid rgba(221, 224, 235, 1);
      padding: 0 13px;
      margin-top: 2px;
      cursor: pointer;
    }
  }
  /deep/.detailCon {
    padding-bottom: 70px;
    .el-collapse {
      border-top: 0 none;
    }
    .el-collapse,
    .el-collapse-item__header,
    .el-collapse-item__wrap {
      border-bottom: 0 none;
    }
    .el-collapse-item {
      padding: 16px 0;
      border-bottom: 1px solid #f0f2fd;
    }
    .el-collapse-item__header {
      font-size: 16px;
      font-familyA: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 56, 94, 1);
      line-height: 48px;
    }
    .el-collapse-item.unread {
      .el-collapse-item__header {
        color: rgba(239, 87, 86, 1);
      }
    }
    .el-collapse-item__content {
      padding-bottom: 10px;
      p {
        font-size: 14px;
        font-familyA: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 56, 94, 0.6);
        line-height: 20px;
      }
    }
    .header-time {
      float: right;
      font-size: 16px;
      font-familyA: OpenSans;
      font-style: normal;
      color: rgba(51, 56, 94, 1);
      margin-right: 25px;
    }
  }
}
.transPages {
  margin-top: 40px;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
}
</style>